<template>
	<el-dialog :visible.sync="isShow" @close="close" width="55%" class="verifiDialog" :show-close='false' :closeOnClickModal='false'
	 append-to-body>
		<span slot="title" class="dialog-title">
		  	检定校准计划
			<el-button  size="mini" @click="close" class="popupClose">关闭</el-button>
		</span>
		<el-form label-width="120px" :inline="false" class="demo-form-inline form" :model="form" :rules="rules" ref="upKeepAddForm">

			<el-form-item label="名称:" prop="name">
				<el-input size="mini" v-model="form.name" placeholder="请输入计划名称"></el-input>
			</el-form-item>
			<el-form-item label="负责人:" prop="leader">
				<el-select multiple  v-model="form.leader" placeholder="请选择"  size='mini' style="width:100%;">
					<el-option v-for="item in EmployeeByLabs" :key="item.account" :label="item.name" :value="item.account" :disabled="item.disabled">
					</el-option>
				</el-select>
			</el-form-item>
      <el-form-item label="校准参数:" prop="request">
      	<el-input size="mini" v-model="form.request" placeholder="请输入校准参数"></el-input>
      </el-form-item>
      <el-form-item label="校准周期:" prop="remark">
      	<el-input size="mini" v-model="form.remark" placeholder="请输入校准周期"></el-input>
      </el-form-item>
			<el-form-item label="有效日期:" prop="startDate">
				<el-date-picker v-model="form.startDate" type="date" size="mini" placeholder="选择日期" style="width:100%;" format="yyyy 年 MM 月 dd 日"
				 value-format="yyyy-MM-dd">
				</el-date-picker>
			</el-form-item>
			<!--<el-form-item label="下次执行日期:" prop="nextDate" v-if="flag=='edit'">
				<el-date-picker disabled v-model="form.nextDate" type="date" size="mini" style="width:100%;" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
				 value-format="yyyy-MM-dd">
				</el-date-picker>
			</el-form-item>-->
			<el-form-item label="下达日期:" prop="remindDay">
				有效日期
				<el-input size="mini" v-model="form.remindDay" :min="1" style="display: inline-block;width: 80px;" class = "deal" @blur="decNumber(form.remindDay)" oninput="this.value=this.value.replace(/[^0-9]+/,'');"></el-input>
				天前
			</el-form-item>

		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button class="penalButton" type="primary" size="mini" @click="submit(0)" :disabled="!isRepeat">确定</el-button>
        <el-button class="penalButton"  size="mini" @click="close">取消</el-button>
	  </span>
	</el-dialog>
</template>

<script>
	import { mapState } from 'vuex'

	export default {
		props: {
			equipmentId: String,
			verificationEditData: Object,
			flag: String
		},
		data() {
			return {
				isShow: true,
				// EmployeeByLabs: [],
				keeper: [],
				form: {
					equipment: '',
					maintainType: "MA02",
					name: '',
					startDate: '',
					nextDate: '',
					spaceTime: '',
					times: '',
					remindDay: '',
					leader: [],
					quartzBean: {
						type: "2",
						jobGroup: "equipment",
						status: "1"
					}
					//    	equipmaintplanItemBeanList:[],
					//    	sort:"1",
					//		status:"2",
				},
				rules: {
					name: [{ required: true, message: '请填写名称', trigger: 'blur' },],
					startDate: [{ required: true, message: '请选择开始时间', trigger: 'change' },],
					remindDay: [{ required: true, message: '请填写', trigger: 'blur' },],
					leader:[{required: true,message: '请选择负责人', trigger: 'change' },],
				},
				isRepeat:true,
			}
		},
		created() {
			// this.getEmployeeByGroup()
		},
		mounted() {
			this.form.equipment = this.equipmentId
			if (Object.keys(this.verificationEditData).length !== 0) {
				this.form.name = this.verificationEditData.name
				this.form.startDate = this.verificationEditData.startDate
				this.form.nextDate = this.verificationEditData.nextDate
				this.form.cycle = this.verificationEditData.cycle
				this.form.spaceTime = this.verificationEditData.spaceTime
				this.form.times = this.verificationEditData.times
				this.form.remindDay = this.verificationEditData.remindDay
        this.form.request = this.verificationEditData.request
        this.form.remark = this.verificationEditData.remark  
				// this.form.leader = this.verificationEditData.leader
				// this.keeper = this.verificationEditData.leader.split(',')
				this.form.leader = this.verificationEditData.leader.split(',')
			}
		},
		computed: {
			...mapState(['EmployeeByLabs'])
		},
		methods: {
			//	h获取责任人/getEmployeeByGroup.htm
			getEmployeeByGroup() {
				let params = { equipment: this.equipmentId }
				let url = 'resource/getEmployeeByGroup.htm'
				this.$http({ apiUrl: url, method: 'post', params: params, isJson: false }).then(res => { if (res.code == 0) { this.EmployeeByLabs = res.data } })
			},
			// 验证保留位数只能为整数
			decNumber(val) {
				var reg = /^[1-9]\d*$/;
				var isInt = reg.test(Number(val));
				if (!isInt) {
					this.form.remindDay = "";
				}
			},
			close() {
				this.$refs.upKeepAddForm.resetFields();
				this.$parent.verificationEditData = {}
				this.$parent.verificationShow = false;
				this.isRepeat = true;
			},
			submit(submitType) {
				this.$refs.upKeepAddForm.validate((valid) => {
					if (valid) {
						let url
						var data = JSON.parse(JSON.stringify(this.form))
						if (Object.keys(this.verificationEditData).length !== 0) {
							url = 'resource/updateEquipPlan.htm'
							// this.form.id = this.verificationEditData.id
							data.id = this.verificationEditData.id
						} else {
							url = 'resource/addEquipPlan.htm'
						}
						// this.form.submitType = submitType;
						// this.form.leader = this.keeper.join(',');
						// this.form.equipmaintplanItemBeanList = this.tableData
						data.submitType = submitType;
						data.leader = data.leader.join(',');
						data.equipmaintplanItemBeanList = this.tableData

						this.isRepeat = false;
						this.$http({
							apiUrl: url,
							method: 'post',
							params: data,
						}).then(res => {
							this.isRepeat = true;
							if (res.code == 0) {
								this.close()
								this.$parent.init()
							}
						})
					} else {
						this.isRepeat = true;
						return false
					}
				})
			}
		}
	}

</script>

<style>
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}

	input[type="number"] {
		-moz-appearance: textfield;
	}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.verifiDialog .el-dialog {
		height: 70%;
	}

	.verifiDialog .el-dialog .el-dialog__body {
		height: calc(100% - 85px);
		padding: 15px;
	}
	.verifiDialog .form .el-form-item {
		margin-bottom: 15px;
	}
</style>
